{% load static %}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>

    .account {
        width: 400px;
        border: 1px solid #dddddd;
        border-radius: 5px;
        box-shadow: 5px 5px 20px #aaa;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        padding: 20px 40px;
    }

    .account h2 {
        margin-top: 10px;
        text-align: center;
    }

</style>
<body>

<div class="account">

    <h2>用户登录</h2>
    <form method="post" novalidate>


        {#            <div class="form-group">#}
        {#                <label>{{ item.label }} </label>#}
        {#                {{ item }}#}
        {#                <sapn style="color: red">{{ item.errors.0 }}</sapn>#}
        {#            </div>#}

        {#        <div class="form-group">#}
        {#            <label for="id_code"> 图片验证码</label>#}
        {#            <div class="row">#}
        {#                <div class="col-xs-7">#}
        {#                    <input type="text" name="code" class="form-control" placeholder="请输入验证码" required#}
        {#                           id="id_code">#}
        {#                    <span style="color: red"></span>#}
        {#                </div>#}
        {#                <div class="col-xs-5">#}
        {#                    <img id="image_code" src="/account/img/" style="width: 125px">#}
        {#                </div>#}
        {#            </div>#}
        {##}
        {#        </div>#}

        {% csrf_token %}
        <div class="form-group">
            <label>用户名 </label>
            {{ form.username }}
            <span style="color: red">{{ form.username.errors.0 }}</span>
        </div>
        <div class="form-group">
            <label>密码 </label>
            {{ form.password }}
            <span style="color: red">{{ form.password.errors.0 }}</span>
        </div>
        <div class="form-group">
            <label for="id_code"> 图片验证码</label>
            <div class="row">
                <div class="col-xs-7">
                    {{ form.code }}
                    <span style="color: red">{{ form.code.errors.0 }}</span>
                </div>
                <div class="col-xs-5">
                    <img id="image_code" src="/account/img/" style="width: 125px">
                </div>
            </div>
        </div>

        <input type="submit" value="登录" class="btn btn-primary">
    </form>

</div>

</body>
</html>